<script setup lang="ts">
import {computed, ref} from "vue";


const percent = computed(() => {
  return (props.curNum as number) / (props.wholeNum as number)
})

//输入
const props = defineProps({
  wholeNum: Number,
  curNum: Number
})
// 输出
const emit = defineEmits(['test'])


function test() {
  emit('test', props.wholeNum)
}


</script>

<template>
  <div class="bar">
    <div class="real-bar">
      <div class="full" :style="{ 'width' :  percent * 600 +'px' }"></div>
    </div>
    <div class="bar-info">
      <div class="process-img">
        <img class="toast" src="../assets/Toast.svg" />
      </div>
      <span class="schedule">10 / 100</span>
    </div>
  </div>
  <button @click="test">内部按钮</button>
</template>

<style scoped>
.toast{
  width: 100%;
  height: 100%;

}
.bar {
  display: flex;
  align-items: center;
}

.bar-info {
  padding-right: 20px;
  display: flex;
  align-items: center;
}

.real-bar {
  flex: 1;
  margin-right: 100px;
  margin-left: 100px;

  width: 600px;
  height: 10px;
  border: 2px solid #ca3636;
  border-radius: 10px;
  overflow: hidden
}

.process-img {
  margin-right: 10px;
  width: 30px;
  height: 30px;
}

.full {
  background-color: #dc9b9b;
  height: 20px;
  transition: width 0.5s;
}

.schedule {
  font-size: 15px;
  margin-right: 20px;
  color: #d81d1d;
}


</style>